Fixes #1452
Fixes #1452
Conversation
There was a problem hiding this comment.
Pull request overview
This PR applies UI styling fixes and refinements across the frontend, focusing on visual consistency and spacing improvements. The changes standardize border-radius values to 4px throughout the application and adjust button sizing in table action columns.
Key Changes:
- Standardized border-radius to 4px for input fields, code editors, and other UI components
- Reduced action button sizes from 36px to 30px (state layer and icon sizes) for more compact table layouts
- Improved dark/light mode color theming for foreign key buttons, table rows, and action buttons
- Refactored dashboard layout padding structure, moving padding from sidenav content to table preview content
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/custom-theme.scss | Updated outlined text field border-radius from 0px to 4px for consistency |
| frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css | Split hover styles into separate dark/light mode media queries with appropriate color values |
| frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.css | Changed code editor border-radius from 0 to 4px |
| frontend/src/app/components/ui-components/record-edit-fields/code/code.component.css | Changed code editor border-radius from 0 to 4px |
| frontend/src/app/components/dashboard/db-tables-data-source.ts | Updated action column width calculation to account for smaller button size (30px instead of 36px) |
| frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css | Changed code editor border-radius from 0 to 4px |
| frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html | Added CSS class to action buttons for consistent sizing |
| frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css | Added action button sizing rules, updated colors for better theme consistency |
| frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css | Removed horizontal offset transforms for cleaner alignment |
| frontend/src/app/components/dashboard/dashboard.component.css | Restructured padding and added scrolling behavior to table preview content |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| padding-bottom: 24px; | ||
| height: calc(100vh - 44px); | ||
| padding: 0 24px; |
There was a problem hiding this comment.
The padding-bottom property is declared here but then immediately overridden by the padding shorthand property on line 121. The padding-bottom: 24px will have no effect. Consider removing this redundant line or combining both into a single padding declaration like padding: 0 24px 24px 24px if bottom padding is needed.
| padding-bottom: 24px; | |
| height: calc(100vh - 44px); | |
| padding: 0 24px; | |
| padding: 0 24px 24px 24px; | |
| height: calc(100vh - 44px); | |
| /* padding-bottom: 24px; removed, combined into padding shorthand */ |
| const defaultActionsCount = permissions.edit + permissions.add + (!!permissions.delete && !!this.canDelete); | ||
| const totalActionsCount = actions.length + defaultActionsCount; | ||
| const lengthValue = ((totalActionsCount * 36) + 32); | ||
| const lengthValue = ((totalActionsCount * 30) + 32); |
There was a problem hiding this comment.
[nitpick] The magic number 30 here corresponds to the button size changes in db-table-view.component.css (lines 470-471 where --mdc-icon-button-state-layer-size is set to 30px). Consider extracting this value as a CSS custom property (e.g., --action-button-size: 30px) to maintain consistency and make future changes easier.
No description provided.